<template>
	<view class="qilin-poetry flex-column">
		<uv-sticky bgColor="#fff">
			<uv-tabs 
				:list="tabList"
				:scrollable="false"
				:current="currentTab"
				:activeStyle="{color:'#3c9cff'}"
				@click="changeTab"
			></uv-tabs>
		</uv-sticky>
		<swiper 
			class="qilin-poetry-list" 
			:current="currentTab" 
			@transition="transition" 
			@animationfinish="animationfinish"
		>
			<swiper-item class="qilin-poetry-list-item">
				<scroll-view
					scroll-y
					style="width:100%;height:100%;padding-left:7px;"
				>
					<view 
						class="item"
						v-for="(item,index) in poetryList"
						:key="index"
					>
						<view class="item-title">《 {{item.title}} 》</view>
						<view class="item-content">{{item.content}}</view>
						<view class="item-author">—— {{item.author}}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="qilin-poetry-list-item">
				<scroll-view
					scroll-y
					style="width:100%;height:100%;padding-left:7px;"
				>
					<view 
						class="item"
						v-for="(item,index) in poemList"
						:key="index"
					>
						<view class="item-title">《 {{item.title}} 》</view>
						<view class="item-content">{{item.content}}</view>
						<view class="item-author">—— {{item.author}}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="qilin-poetry-list-item">
				<scroll-view
					scroll-y
					style="width:100%;height:100%;padding-left:7px;"
				>
					<view 
						class="item"
						v-for="(item,index) in songList"
						:key="index"
					>
						<view class="item-title">《 {{item.title}} 》</view>
						<view class="item-content">{{item.content}}</view>
						<view class="item-author">—— {{item.author}}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="qilin-poetry-list-item">
				<scroll-view
					scroll-y
					style="width:100%;height:100%;padding-left:7px;"
				>
					<view 
						class="item"
						v-for="(item,index) in sentenceList"
						:key="index"
					>
						<!-- <view class="item-title">《 {{item.title}} 》</view> -->
						<view class="item-content">{{item.content}}</view>
						<view class="item-author">—— {{item.author}}</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="qilin-poetry-list-item">
				<scroll-view
					scroll-y
					style="width:100%;height:100%;padding-left:7px;"
				>
					<view 
						class="item"
						v-for="(item,index) in articleList"
						:key="index"
					>
						<view class="item-title">《 {{item.title}} 》</view>
						<uv-read-more class="item-more-content" show-height="100px" :toggle="true">
							<view class="content">{{item.content}}</view>
						</uv-read-more>
						<view class="item-author">—— {{item.author}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
import {reactive,ref} from "vue";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
let currentTab = ref(0); //当前tab索引
// tab数据选项
const tabList =reactive([
	{
		name:"诗",
		id:1
	},
	{
		name:"词",
		id:2
	},
	{
		name:"歌词",
		id:3
	},
	{
		name:"佳句",
		id:4
	},
	{
		name:"美文",
		id:5
	}
]);
// 诗集
const poetryList = reactive([
	{
		title:"无名",
		content:"长江悠悠波涛怒，\n黄河滚滚浪沙聚。\n今我挥笔抒豪情？\n直向苍天揽明月！",
		author:"Qilin"
	},
	{
		title:"清明云山",
		content:"常有四五青山乐，\n各路佳人归云鹤。\n清风冷寺何人知？\n叹有云山故人游！",
		author:"Qilin"
	},
	{
		title:"石桥情",
		content:"每逢三月雨纷纷，\n暗藏贤惠独秀贞。\n世间何处觅佳人，\n唯有当涂石桥镇！",
		author:"Qilin"
	},
	{
		title:"朋心颂",
		content:"慕伊天地一线牵，\n苏杭西湖接天连。\n红线绵绵续情缘，\n艳装浓抹银河边。",
		author:"Qilin"
	},
	{
		title:"婵娟恋",
		content:"思伊黄河水东流，\n谷麦稻穗金黄透，\n昌兴明月云中走，\n娟意朦胧佳人秀。\n问天常有几多愁？\n欲追长江波涛旧！",
		author:"Qilin"
	},
	{
		title:"赠伊人",
		content:"爱莲腰间一根通，\n先天雨后出彩虹。\n林间小路百丈空，\n霞连天际入江东！",
		author:"Qilin"
	},
	{
		title:"情网一",
		content:"同在屋檐把学求，\n爱慕之心日长久。\n愿求月老怜痴汉，\n花前月下红线留。",
		author:"Qilin"
	},
	{
		title:"情网二",
		content:"此情非朝朝暮暮，\n无奈汝忙忙碌碌。\n驽线焉能配作玉？\n恨己早已与世故！",
		author:"Qilin"
	},
	{
		title:"四季",
		content:"春朝雨露故场眷，\n夏日河蓬白添圆。\n秋土塞上荒坯圩，\n冬水长流林霞边！",
		author:"Qilin"
	},
	{
		title:"旋风小子",
		content:"华语天王林志颖，\n诗文歌赋样样精。\n人送外号小旋风，\n席卷亚洲好出名！",
		author:"Qilin"
	},
	{
		title:"化蝶",
		content:"一笑浮百媚，梦死万生醉。\n倾听落花意，唯恐只身归。\n尝觅她仙影，失落几时回。\n沧桑抚明月，青春绝相随！\n此事天下奇，但守心原配；\n芳华惊四座，临阵不言退。\n知汝应有意，群至皆回避。\n愿同永长久，化蝶丛林飞！",
		author:"Qilin"
	},
	{
		title:"排队心得",
		content:"校园打饭，还要排队；\n地痞无赖，见隙插队；\n无则动粗，管你是谁；\n市井小生，找人就贿；\n悠闲懒惰，庸人可贵；\n逆水行舟，不进则退！",
		author:"Qilin"
	},
	{
		title:"鸿鹄志叹",
		content:"镜中谢花，水中残月。\n月隐星稀，凄风黑夜。\n遥想当年，割袖一别。\n恨不相逢，形影自灭！\n息叹今朝，千古之杰；\n经天纬地，文法一绝。\n并江填海，万物俱邪；\n痛堪浮生，难遇伯乐！",
		author:"Qilin"
	},
	{
		title:"相思情·其一",
		content:"意道寒影柳飘絮，惬入身影望无际。\n波澜壮阔观大地，小桥流水日落夕！\n横涯广际聊疆域，我道孰与云中行。\n花洒人间映四季，日慕伊人恋心底！\n爱意情思布天际，为此换回百丈林。\n千古佳丽多如此，何乎崎岖在路徙！\n天涯悬边守倩影，愿化星星永陪你。\n挨过人间几回忆，泪洒倾城在一起！",
		author:"Qilin"
	},
	{
		title:"相思情·其二",
		content:"满夜风辰落繁星，密布满堂似水晶。\n秀丽人间江山景，意姿不卷背山情！\n嫣然一笑动川林，百家灯火万户鸣。\n植林山下映身影，惬入我心难忘记！",
		author:"Qilin"
	},
	{
		title:"相思情·其三",
		content:"风飘飘兮落水情，月光洁兮万千意。\n遥看春江天际流，唯恐换来末日愁。\n风光不改鱼依游，秋林枫火叶红透！\n雨哗哗兮犹身影，泪倾城兮洒江心！",
		author:"Qilin"
	},
	{
		title:"考试歌头",
		content:"期末统考几时有，把笔握在手里头。\n题题不会万般愁，考过叹息无奈走。\n领成绩单时发抖，老班看得我惊悚。\n回家见人就忙躲，不料父母身旁过。\n快如闪电单拿走，眼里砰砰冒着火。\n拿着鸟包顿乱揍，天涯何处我能躲。\n今年过年不好过，要过就过脑震波！",
		author:"Qilin"
	}
]);
// 词集
const poemList = reactive([
	{
		title:"予美人",
		content:"佳人如玉，婉转一笑倾国城；\n痴人如醉，思绪落笔几时回。\n凌波尚且微步，含羞略带雅儒；\n广袖流仙美裙，映得美人几分。\n望天上人间，白云似浮萍；\n愿此景长留，梦入久相随。",
		author:"Qilin"
	},
	{
		title:"游记当涂景",
		content:"琳琅满目，映入眼帘；仰头遥望，高楼大厦；低头沉思，依稀牵挂；当涂自古繁华！昔太白游览群山，已成佳话；子美流连光景，举叹惊煞！幽幽古亭下，碧水连桥一画，倚仗水上，搭耸两岸，沟通风水文化。有垂柳莄草，粼粼波花；烟草古桐，奇枝异花！赞妙不绝言，千古无此一画。拾足此地，流连忘返人家；依依回首，归去游人夸！",
		author:"Qilin"
	},
	{
		title:"忆孔明（观三国志感）",
		content:"碧伦红霞，生万丈光芒，千秋风华！略亮奇才，善通文兵各法，有“运筹帷幄中，决胜千里外”之能！幼好《梁父吟》，创木牛流马；巧夺天工物，好为阵八卦；三寸不烂舌，辩江东群儒；赤壁败曹操，西城惊仲达；平定政国事，名扬号北伐；旷世之伟业，永受世人夸。问世间谁堪伯仲？\n回眸古今两千年，或一生戎马，或亡命天涯，全无业绩风华，更无功名可嘉！再论三国孔明，计谋超群，智冠古今。隆中尚未出，已三分天下；一生肝胆照，半世无浮夸；鞠躬尽瘁死，有万千佳话！",
		author:"Qilin"
	},
	{
		title:"玉燕子",
		content:"初春归，燕飞回，斜阳洒光辉；\n筑乌巢，叼新泥，万待虚寒岁；\n朦雨中，燕相随，千朝似心醉；\n雾珠水，映玉燕，挥翅东南飞！",
		author:"Qilin"
	},
	{
		title:"单相思",
		content:"长虹当空照，岁何时？\n一簇秋叶飘落去，疑似冬雪漫天来，月为孰待？\n荷塘风高多菱带，青石白岩铺青苔，孰人知？\n弹萧一首为青睐，轻歌一曲似花开，我为孰采？\n夜星零落柳飘絮，轻拢慢捻月独白，孰为我栽？\n满屋烟尘飞飘然，月过枝头疑伊在。\n寻声暗问泪孰流，唯我独哀！",
		author:"Qilin"
	},
	{
		title:"助威歌",
		content:"秋风吹，战鼓擂，多少班级为分累。\n狂欢醉，亡命催，声响爆满拉拉队。\n一年一度来相会，胜负常事和为贵。\n不问今夕是何岁。只求潇洒走一回！",
		author:"Qilin"
	},
	{
		title:"灯生",
		content:"虫嘶蚊鸣嗡嗡声，引来愁苦眉边生。\n一丝不苟欲报情，悲思根深意沉沉。\n眼瞅窗外片片黑，星星灯火伴路行。\n低头不语埋勤奋，些许毫热随偿灯！\n前方日近书号声，近处书卷三两层。\n偶来犬吠深巷中，随即谈笑几行人。\n万家灯火百家营，已是夜半终迎晨。\n月隐星稀别作客，但无萤火独斟酌。\n思白逢此自由饮，豪放不羁仍留名！\n叹息间，催入睡，一阵心寒入心头；\n挥笔凌，心中愁，刹时涌入大江流！\n自视古来无圣贤，却道抬爱皆白梦。\n春风始向花开处，惟有此处灯长生！",
		author:"Qilin"
	},
	{
		title:"龙中对",
		content:"枫如火，年年行大运；\n月如钩，星星飘零絮。\n永恒者，善观其变也，可以为生计；\n歌德者，持日月沧桑，能令水波静！\n快舞挑离弦更生，夜飞塞外朦雾晨。\n蒸蒸日上尽心思，慢饮美茶活灵身！\n山水依旧过明天，花洒人间迎龙年！",
		author:"Qilin"
	},
	{
		title:"诸葛亮",
		content:"给我一个诸葛亮，让我考试不用慌！\n随便一个妙计囊，卷起整个太平洋！\n自从跟了刘关张，吃不饱还没得穿！\n一生衷心肝胆照，到头只当个丞相！\n当年空城一计施，吓得曹操也斗量！\n不如弃了刘关张，随我东南西北闯！\n有你在边帮我忙，考上清华都正常！\n千年诸葛亮，赛过红太阳！",
		author:"Qilin"
	}
]);
// 歌词集
const songList = reactive([
	{
		title:"青花瓷",
		content:"天青色等烟雨，而我在等你，炊烟缭缭升起，隔江千万里，在瓶底书汉隶仿前朝的飘逸，就当我为遇见你伏笔！",
		author:"周杰伦"
	},
	{
		title:"暮色回响",
		content:"或许你也听过他说话，低沉或嘶哑，那是他在倾诉他的牵挂；他也许在最后的地点，在你的身边，在你的梦魇如果看见他请别害怕！",
		author:"张韶涵"
	},
]);
// 佳句集
const sentenceList = reactive([
	{
		content:"中国的改革开放，可以说是浩浩荡荡，每个人都身处洪流之中；其间，有许多人凭着自身的努力或者说幸运站在了潮头之上，这潮头之上是风光无限、诱惑无限、但也风险无限，就看你如何把握了；看未来远不如看过去要来的清楚，激昂和困惑交织在每个人的心头！",
		author:"省委高育良"
	},
	{
		content:"若有一天，星空炸裂，乾坤倾覆，无数故人红颜白发，魂归黄土，消失在岁月当中；而你虽世间无敌，却只能独自站在岁月长河上，回首万古，独伴大道！",
		author:"柳神"
	},
	{
		content:"究竟什么的结局才配得上这一路的颠沛流离",
		author:"管泽元"
	},
	{
		content:"小子，人生就是如此，没有人能陪你一直走下去，即便以后没有相见之日，你也该明白自己要走的路！",
		author:"小塔"
	},
	{
		content:"朝圣者，虔诚而真挚，自海的那一端而来，一步一叩首，只为觐见本座，你为何带着杀意而至？遇帝不拜，真命已失，轮回碑上有汝名；一步一叩首，往生路上罪削半，护你真灵；纵横古今，天上地下无敌，渴求一败而不能；这时你出现了，但也终究只是一个献祭者，违背帝之法旨，吾亲手镇杀之！",
		author:"苍帝"
	}
]);
// 美文集
const articleList = reactive([
	{
		title:"鱼心人不知",
		content:`古赋：最熟悉的地方没有风景：
			\n茕茕白免，东奔西顾;衣不如新，人不如故，人不如故寻之将至，背影模糊。
			\n"袅晴丝吹来闲庭院，摇漾春如线，停半晌，整花钿；怀揣菱花，偷人半面，迤逗的彩云偏。步香闺怎便把全身现”
			\n追寻了千年，你近在眼前，却犹抱琵琶半遮面；这场景上演了几百遍，作为主角的你却不曾露面；这场戏我看了几千年，熟悉的你却视如初见；“不到园林怎知春色如许，原来姹紫嫣红开遍，似这般美好都赋予断井残垣！良辰美景奈何天，赏心乐事谁家院！”
			\n走过了十里画廊，却感叹仙境不存人同、彼岸的花盛开在心田，身边的景遗失在眼敛、错过了的姻缘，我追寻了千年；经历过后，蓦然回首才发现擦肩而过的邂逅己是心底抹不去的永恒，怎奈何当时只道是寻常。错失了良辰美景，花好月圆，“怡三春好处无人见，则为你如花美眷似水流年。这一霎天留人便草籍花眠，怕罡风，吹得了花凌乱，辜负了好看光，徒唤了枉然”。
			\n绝命崖上的冰花，死亡海里的珊瑚；你偏说那是如花美着，似水流年，枉叫我留恋了千年；徒增那冷雨秋槐愁无眠；
			\n左手冰花汇威水，右手珊瑚碎飘风，昔时情绝韶光贱，今日人贱韶光艳。
			\n时文：不寻清流的鱼：
			\n风飞翔翔兮，四海求凰；鱼潜五湖兮，不求甘醴。
			\n"我转动所有的经简，不为超度，只为触摸你的指尖。”
			\n总有人追求路的尽头，那娇艳的永仙；总有人寻觅梦的边沿那纷飞的彩蝶、我经丘寻壑，涉水渡河；不求天涯海角，只为云霞翠轩。
			\n“我五体投地在山路，不为朝觐，只为贴着你的阵温”
			\n不是每个猎人眼中都只有猎物，不是每个渔夫眼里只有鱼贝、也许我不是尽职的猎人，也许我不是尽责的渔夫，但我心里有水眼里有山、书山学海都是风景，为什么一定要到山的顶端，海的彼岸？
			\n或许山的那边还是山，海的那头还是海。既然没有终点，何不寻个中点；
			\n"我转山转水转佛塔不为来世，只为途中与你相遇”
			\n世界讲的是效率，世人想的是利益。繁弦急管灯红酒绿；淳朴，我在寻觅；你遗落在了哪里？为什么身上布满尘埃？
			\n后记：我是不属于人海的鱼，哼着秦腔梦调，自言自语；
			\n我珍惜的时候，佳人不现容颜；我挥霍的时候，良辰美景花钿；我放弃的时候，仙露琼浆遍野；我追寻的时候，吉光片羽不见。
			\n世人追寻尽头，我欣赏眼前，世人心系利益，我沉沦阆苑；世人讲究效率，我行在流年。\n
		`,
		author:"佚名"
	},
	{
		title:"时间在流逝",
		content:`春来秋去又一年，燕回仍未把巢嫌。无奈吾心已尘覆，随那流水入西天。--题记
			\n不记何时拂过你的笑脸，在那春暖花开的季节。你说要离我而去，因为这不是属于你的春天。说后转身踱去，瞬间化成云烟，只留我在那蝶扰虫鸣的地点，流泪问你：时间，何时再能见面？
			\n罢，也许挽不住他的手腕，但回忆却如小河，悠悠淌的闲，记住你的笑脸，犹似春日阳光。不忘曾经戏要在那柳暗花明，不忘与你共同垂钓在那碧溪。时间，你我生死相随，待到山花又烂漫，吾将携你手，拾级登高楼，一碟菜着两盏酒，诉你心中快乐，倾你心中烦忧。可是，你慢慢老去，不能与我同舟。
			\n时间在流逝。春，匆匆路过，未带一袖清风，未留一抹云烟。像童时河边玩耍，踩在沙滩的脚丫转身被河水重新填埋；像幼年随地撒尿，印在地板上的水迹回眸间便被蒸成水汽；像少年湖边嬉戏，留在水面的涟漪被湖水吞噬抹去；像如今的昨天，剩下的回忆一夜变成空白，一丝不留的随时光消失在深黑的夜晚，抓不住，唤不回。
			\n曾彻夜哭诉被时间抛弃的委屈，却只有大雁的哀号传回;曾整日怒吼被时间丢下的不满，却只有知了的尖叫响应。可能只能一人独自承受这失去的痛苦，抑或只有自己承担不得不抛弃的无奈。然而，坎太深，缝又太宽，这一残酷的现实带来的就是对白驹过隙的深刻体会和对寸寸光阴的感受。当释怀，当放开，或许一切仍在。
			\n春天，希望仍在，虽然岁暮阴阳催短景；夏天，激情仍在，虽然门前流水尚能西;秋天，果实仍在，虽然一蓑烟雨任平生；冬天，憧憬仍在，虽然天涯霜雪霁寒宵。没有什么离开，虽然时光很快；没有什么不在，虽然流水逝去很快。该做的不是闲梳妆，独倚窗，徒增愁容，徒添哀伤，而应趁艳阳，霸占山头，开怀畅饮，放声歌唱!
			\n无论如何，时光总在流淌，像一捧清泉，随指缝就落下留恋与哀伤。即便如此，也仍冷冷逝去，没留下半点施舍。何不学着太阳，让自己辉煌，等到那天，和时光比一比，看谁更亮!
			\n是的，既然冷眉转身对，不如吾笑转身回，就算难舍时光恋，总得竭力一生追。\n
		`,
		author:"佚名"
		
	},
	{
		title:"心痛——心灵的漏洞",
		content:`透过指缝向遥远的天空相望，
			\n见到的是黑夜中耀眼的月亮，\n是累、是痛、是无助、还是心伤；
			\n看到的是天地间刺目的太阳，\n是疯、是傻、是叹息、还是彷徨！
			\n漫无目的神情失措迷失在大街上，\n多少心伤彷徨沦落人沉醉于酒乡，
			\n有时候，你付诸一生韶华，却终是空留牵挂；
			\n有时候，你为她亡命天涯，却终是徒留空话；
			\n有时候，你对她许诺天下，却终是一句笑话；
			\n到头来，负了红颜，失了她，只剩心痛，满了天下!
			\n本以为青梅竹马，却道是枯藤老树昏鸦；
			\n本以为相爱天涯，却道是小桥流水人家；
			\n本以为处身仲夏，却道是已而夕阳西下；
			\n最终是，弃了天下，忘了她，只留心伤，一生牵挂！
			\n人生若只如初见，
			\n相遇也许少了流连，
			\n但我不愿忘却，
			\n你那迷人的笑脸，
			\n留给我的思绪万干！
			\n我怀念：
			\n一笑浮百媚，梦死万生醉；
			\n我幽怨：
			\n倾听落花意，唯恐只身归；
			\n我不知道自己能否成为你生命中的一个面，
			\n但我期待可以成为你美好记忆里的一个点。
			\n我向佛许愿：
			\n我愿用千年演化一座桥，
			\n只为千年后的你途经时莞尔一笑。
			\n我曾跋山涉水搜寻世间最华丽的词藻，
			\n也修饰不了你的半分美好；
			\n我曾漂洋过海探索晨间最靓丽的破晓，
			\n也替代不了你那倾城一笑！
			\n彩云系天边，繁星伴婵娟；星宿灵殿，小雨如绵，自是回味无限；
			\n谈笑话语间，何求佳人之美，你锁眉，更是几番轮回！
			\n也许忘记是一种释怀的解药，
			\n也许痴迷是一种致命的毒药，
			\n但我还会情愿沉沦，
			\n只为那幻境中的美好；
			\n也许我的内心已遍布剧毒，
			\n也许我的心灵已急需修复，
			\n但我仍会不愿扫描，
			\n只为保留与你记忆中的初遇。
			\n我望向天空，脑中浮现：
			\n凌波尚且微步，含羞略带雅儒。
			\n记忆中的画面，时隐时现
			\n指缝穿过的阳光，依旧温暖！\n
		`,
		author:"Qilin"
	}
]);



/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/
// 切换tab页签事件监听
const changeTab=(obj)=>{
	// console.log(obj)
	currentTab.value = obj.index;
};
const transition=(event)=>{
	// console.log(event);
};
// 内容区域左右滑动时事件监听
const animationfinish=(event)=>{
	// console.log(event);
	if(event.detail.current === currentTab.value) return;
	currentTab.value = event.detail.current;
};

/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-poetry{
	height:100%;
	>.qilin-poetry-list{
		padding:20upx 20upx 40upx;
		// padding:20upx 0 40upx 35upx;
		flex:1;
		.qilin-poetry-list-item{
			height:100%;
			.item{
				width:100%;
				margin-bottom:30upx;
				background-color:#fff;
				border-radius:$border-radius-card;
				box-shadow:$box-shadow-card;
				>.item-title{
					text-align:center;
					font-weight:bolder;
					padding:20upx;
					border-bottom:1upx solid var(--qilin-border-color);
				}
				>.item-content{
					text-align:center;
					padding:20upx;
					white-space:pre-wrap;
				}
				>.item-author{
					text-align:right;
					padding:20upx;
					font-weight:bolder;
					border-top:1upx solid var(--qilin-border-color);
				}
				>.item-more-content,:deep(>.uv-read-more){
					padding:20upx;
					.content{
						font-size:30upx;
						text-align:center;
						white-space:pre-wrap;
						line-height:50upx;
					}
				}
			}
		}
	}
}
</style>
